<template>
  <CardContainer style="padding:5px 0px" v-bind="$attrs">
    <div slot="header" class="card">
      <div class="card-header-left">
        <slot name="left">
          <div :class="{'card-header-left-title':true,'line':line}">
            <img v-if="icon!==''&&!line" :src="icon" :srcset="srcset" alt="">
            <el-badge :value="count" :hidden="count===0" :max="99">
              <span>{{ title }}</span>
            </el-badge>
          </div>
        </slot>
      </div>
      <div class="card-header-left">
        <slot name="right" />
      </div>
    </div>
    <slot />
  </CardContainer>
</template>
<script>
import CardContainer from '@/components/CardContainer'
export default {
  name: 'Card',
  components: {
    CardContainer
  },
  inheritAttrs: false,
  props: {
    icon: {// 图标
      type: String,
      default: ''
    },
    srcset: {// 图标
      type: String,
      default: ''
    },
    title: {// 标题文字
      type: [String, Number],
      default: ''
    },
    count: {// 计数
      type: [Number, String],
      default: 0
    },
    line: {// 是否显示左侧垂直竖线
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang='scss' scoped>
@import "@/styles/mixin.scss";
.card{
  @include flex($justify:space-between,$align:center);
  .card-header-left{
    & .line{
      @include vrtclLine();
    }
    .card-header-left-title{
      font-size: 0;
      @include flex($align:center);
      &>img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
      }
      & span{
        font-size: 14px;
        color: #333;
        font-weight: 600;
      }
    }
  }
  .card-header-right{

  }
}
</style>
<style lang="scss">
.card-header-left-title{
  & sup{
    right: -6px !important;
  }
}
</style>
